//雷达图展示的功能

//个人填报功能


import React, {PureComponent} from "react";
import {Table} from "antd";
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

import ReactEcharts from "echarts-for-react";
import {randomRgbColor, getAbilityById} from "@/pages/RadarChart/base/DataLoad";


export default class RadarChartView extends PureComponent {

  indicator = [];

  genFrom(jobs, valueMap, colors) {
    if (jobs == null || jobs.length == 0) {
      return null;
    }
    let title = "";
    let abilityMap = {};
    let res = {};
    for (let job of jobs) {
      title += "," + job.name;
      if (job.rule) {
        for (let i in job.rule) {
          let name = getAbilityById(i).name;
          if (abilityMap[i] == null) {
            abilityMap[i] = {important: false, array: [], name: name};
          }

          if (job.important && job.important.indexOf(i) != -1) {
            abilityMap[i].important = true;
            abilityMap[i].array.push("*" + job.name);
          } else {
            abilityMap[i].array.push(job.name);
          }
          if (job.base == null) {
            job.base = {};
          }
          //给base添加默认值60分
          if (job.base[i] == null) {
            job.base[i] = new Number(60);
          }
        }
      }
    }


    //构造最终基线
    for (let job of jobs) {
      let array = [];
      for (let i in abilityMap) {
        let value = job.base[i] == null ? new Number(0).toFixed(2) : new Number(job.base[i]).toFixed(2);
        array.push(value);
      }
      res[job.name + "基线"] = array;
    }

    if (title != "") {
      title = title.substr(1, title.length);
    }
    title += "雷达图";
    if (valueMap != null) {

      res['个人得分'] = [];
      for (let i in abilityMap) {
        res['个人得分'].push(new Number(valueMap[i]).toFixed(2))
      }

    }
    let data = [];
    let indicator = [];

    let index = 0;
    for (let key in res) {
      let color = randomRgbColor();
      if (colors && index < colors.length) {
        color = colors[index];
        index++;
      }

      let object = {
        value: res[key],
        name: key,
        itemStyle: {
          normal: {
            color: color,
            lineStyle: {
              width: 1,
              color: color,
            },
          },
        },
      }
      data.push(object);
    }
    //构造指标
    for (let key in abilityMap) {
      // let origin = "";
      // for (let j of abilityMap[key].array) {
      //   origin += "," + j;
      // }
      // let name = key + "[" + origin.substr(1, origin.length) + "]";
      let name = abilityMap[key].name;
      let color = abilityMap[key].important == false ? '#838D9E' : 'red';

      let obj = {
        name: name, max: 100, color: color,
        title: origin,
        //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在通信这条indicator上显示
        axisLabel: {
          show: false,
          fontSize: 12,
          color: color,
          showMaxLabel: false, //不显示最大值，即外圈不显示数字30
          showMinLabel: false, //显示最小数字，即中心点显示0
        }
      };
      indicator.push(obj);
    }
    if (indicator.length == 0) {
      return null;
    }
    return this.gen(title, indicator, data);
  }

  gen(title, indicator, data) {

    return {
      title: {
        text: title,
        textStyle: {
          color: 'rgba(221,221,221,1)', //标题颜色
          fontSize: 14,
          lineHeight: 20,
        },
        // 标题的位置，此时放在图的底边
        left: 'center',
        top: 'bottom',
      },
      // 图表的位置
      grid: {
        position: 'center',
      },
      tooltip: {
        //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
        confine: true,
        enterable: true, //鼠标是否可以移动到tooltip区域内
      },
      radar: {
        shape: 'circle',
        splitNumber: 5, // 雷达图圈数设置
        name: {
          textStyle: {
            color: '#838D9E',
          },
        },
        // 设置雷达图中间射线的颜色
        axisLine: {
          lineStyle: {
            color: 'rgba(131,141,158,.1)',
          },
        },
        indicator: indicator,
        //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
        splitArea: {
          show: false,
          areaStyle: {
            color: '#37474f', // 图表背景的颜色
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: 'rgba(131,141,158,.1)', // 设置网格的颜色
          },
        },
      },
      series: [{
        name: '雷达图', // tooltip中的标题
        type: 'radar', //表示是雷达图
        symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
        symbolSize: 8, // 拐点的大小

        areaStyle: {
          normal: {
            width: 1,
            opacity: 0.2,
          },
        },
        data: data,
      }],
    };
  }


  render() {
    let genFrom1 = this.genFrom(this.props.job, this.props.valueMap, this.props.colors);
    if (genFrom1 == null) {
      return "";
    }
    return (<div><ReactEcharts
      option={genFrom1}
      style={{height: '500px', width: '100%'}}
      className='echarts-for-echarts'
      theme='my_theme'/></div>);
  }
}

